<template>
  <view class="uni-collapse">
    <slot />
  </view>
</template>
<script lang="ts">
/**
 * Collapse 折叠面板
 * @description 展示可以折叠 / 展开的内容区域
 * @tutorial https://ext.dcloud.net.cn/plugin?id=23
 * @property {String|Array} value 当前激活面板改变时触发(如果是手风琴模式，参数类型为string，否则为array)
 * @property {Boolean} accordion = [true|false] 是否开启手风琴效果是否开启手风琴效果
 * @event {Function} change 切换面板时触发，如果是手风琴模式，返回类型为string，否则为array
 */
export default {
  name: "uniCollapse",
  emits: ["change", "activeItem", "input", "update:modelValue"],
  props: {
    value: {
      type: [String, Array],
      default: "",
    },
    modelValue: {
      type: [String, Array],
      default: "",
    },
    accordion: {
      // 是否开启手风琴效果
      type: [Boolean, String],
      default: false,
    },
  },
  data() {
    return {};
  },
  computed: {
    // TODO 兼容 vue2 和 vue3
    dataValue() {
      let value = (typeof this.value === "string" && this.value === "") || (Array.isArray(this.value) && this.value.length === 0);
      let modelValue = (typeof this.modelValue === "string" && this.modelValue === "") || (Array.isArray(this.modelValue) && this.modelValue.length === 0);
      if (value) {
        return this.modelValue;
      }
      if (modelValue) {
        return this.value;
      }

      return this.value;
    },
  },
  watch: {
    dataValue(val) {
      this.setOpen(val);
    },
  },
  created() {
    this.childrens = [];
    this.names = [];
  },
  mounted() {
    this.$nextTick(() => {
      this.setOpen(this.dataValue);
    });
  },
  methods: {
    setOpen(val) {
      let str = typeof val === "string";
      let arr = Array.isArray(val);
      this.childrens.forEach((vm, index) => {
        if (str) {
          if (val === vm.nameSync) {
            if (!this.accordion) {
              console.warn("accordion 属性为 false ,v-model 类型应该为 array");
              return;
            }
            vm.isOpen = true;
          }
        }
        if (arr) {
          val.forEach((v) => {
            if (v === vm.nameSync) {
              if (this.accordion) {
                console.warn("accordion 属性为 true ,v-model 类型应该为 string");
                return;
              }
              vm.isOpen = true;
            }
          });
        }
      });
      this.emit(val);
    },
    setAccordion(self) {
      if (!this.accordion) return;
      this.childrens.forEach((vm, index) => {
        if (self !== vm) {
          vm.isOpen = false;
        }
      });
    },
    resize() {
      this.childrens.forEach((vm, index) => {
        // #ifndef APP-NVUE
        vm.getCollapseHeight();
        // #endif
        // #ifdef APP-NVUE
        vm.getNvueHwight();
        // #endif
      });
    },
    onChange(isOpen, self) {
      let activeItem = [];

      if (this.accordion) {
        activeItem = isOpen ? self.nameSync : "";
      } else {
        this.childrens.forEach((vm, index) => {
          if (vm.isOpen) {
            activeItem.push(vm.nameSync);
          }
        });
      }
      this.$emit("change", activeItem);
      this.emit(activeItem);
    },
    emit(val) {
      this.$emit("input", val);
      this.$emit("update:modelValue", val);
    },
  },
};
</script>
<style lang="scss">
.uni-collapse {
  /* #ifndef APP-NVUE */
  width: 100%;
  display: flex;
  /* #endif */
  /* #ifdef APP-NVUE */
  flex: 1;
  /* #endif */
  flex-direction: column;
  background-color: #fff;
}
</style>
